<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css" />
    <script src="lib/jquery-3.2.1.js"></script>
    <!-- 导入swiper -->
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
    <!-- 导入iconfont -->
    <script src="https://at.alicdn.com/t/font_2206431_6qjb2nc7o0k.js"></script>
    <link
      rel="stylesheet" href="//at.alicdn.com/t/font_2219399_6vn9ebmlwga.css"
    />
  </head>

  <body>
    <div class="body">
      <div class="nav">
        <div class="top-nav-icon"></div>
        <div class="nav-input">
          <button></button>
          <input type="text" placeholder="2020《猴鼎记》火热开播" />
          <!-- <div class="yuyin">
                    <a href="javascript:void(0)"><i class="iconfont icon-yuyin"></i></a>
                </div> -->
        </div>

        <div>
          <a href="javascript:void(0)">
            <i class="iconfont icon-lishichaxun"></i>
          </a>
        </div>
        <div>
          <a href="javascript:void(0)">
            <i class="iconfont icon-lishichaxun"></i>
          </a>
        </div>
      </div>
      <div class="type-nav">
        <span><a href="">精选</a></span>
        <span><a href="">火星5</a></span>
        <span><a href="">剧集</a></span>
        <span><a href="">电影</a></span>
        <span><a href="">综艺</a></span>
        <span><a href="">动漫</a></span>
        <span><a href="">菜单</a></span>
      </div>
      <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="images/058300005F06780E6AEB660D39AE8E30.jpg" alt="" /></div>
            <div class="swiper-slide"><img src="images/054F01015F83D3F404CD83A56A31292B.png" alt="" /></div>
            <div class="swiper-slide"><img src="images/058300005EA670E56AEB660DCB095D31.jpg" alt="" /></div>
            <div class="swiper-slide"><img src="images/752f93caa31742469a932a1c209a12d4.jpg" alt="" /></div>
        </div>

        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
      </div>
      <div class="guset-like-body">
        <div class="guset-like-top">
            <p><a href="javascript:void(0)" class="guset-like-top-get">猜你喜欢</a></p>
            <p><a href="javascript:void(0)">周边探店</a></p>
            <p><a href="javascript:void(0)">今日特价</a></p>
            <p><a href="javascript:void(0)">同城逛吃</a></p>
        </div>
        <div class="guset-like-main">
            <div class="for-student-list-body guset-like">
                <a href="javascript:void(0)"><img src="images/甘蔗.jpg" alt=""></a>
                <p><a href="javascript:void(0)" class="title">甘蔗2斤±0.2斤</a></p>
                <p><a href="javascript:void(0)" class="detailed">甘甜多汁  一口嘎嘣脆</a></p>
                <span><a href="javascript:void(0)" class="price">￥0.01</a></span>
                <span><a href="javascript:void(0)" class="past-price">￥6.9</a></span>
                <span><a href="javascript:void(0)">首单价</a></span>
            </div>
            <div class="for-student-list-body guset-like">
                <a href="javascript:void(0)"><img src="images/炸鸡.jfif" alt=""></a>
                <p><a href="javascript:void(0)" class="title">叫了个炸鸡  单人套餐A</a></p>
                <p><a href="javascript:void(0)" class="detailed">很不错</a></p>
                <span><a href="javascript:void(0)" class="price">￥10.9</a></span>
                <span><a href="javascript:void(0)" class="past-price">￥35.8</a></span>
                <span><a href="javascript:void(0)">3折</a></span>
            </div>
            <div class="for-student-list-body guset-like">
                <a href="javascript:void(0)"><img src="images/橘子.jpg" alt=""></a>
                <p><a href="javascript:void(0)" class="title">皇帝柑  500±50g/份</a></p>
                <p><a href="javascript:void(0)" class="detailed">清甜多汁，果香四溢</a></p>
                <span><a href="javascript:void(0)" class="price">￥0.99</a></span>
                <span><a href="javascript:void(0)" class="past-price">￥5.9</a></span>
                <span><a href="javascript:void(0)">首单价</a></span>
            </div>
            <div class="for-student-list-body guset-like">
                <a href="javascript:void(0)"><img src="images/黄焖鸡米饭.jpg" alt=""></a>
                <p><a href="javascript:void(0)" class="title">爱上黄焖鸡米饭·火锅鸡<br>特惠单人套餐</a></p>
                <p><a href="javascript:void(0)" class="detailed">千张黄焖鸡、土豆黄焖鸡</a></p>
                <span><a href="javascript:void(0)" class="price">￥8.8</a></span>
                <span><a href="javascript:void(0)" class="past-price">￥24</a></span>
                <span><a href="javascript:void(0)">3.7折</a></span>
            </div>
        </div>
        <div class="test"></div>
    </div>

      <script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
      <script>
        var mySwiper = new Swiper(".swiper-container", {
          direction: "horizontal", // 垂直切换选项
          loop: true, // 循环模式选项
          autoplay: {
            delay: 1000,
            stopOnLastSlide: false,
            disableOnInteraction: true,
          },

          // 如果需要分页器
          pagination: {
            el: ".swiper-pagination",
            clickable: true,
          },
        });
      </script>
    </div>
  </body>
</html>
